前言
作为一个IT技术人员,自然离不开技术的积累,而技术的积累则通过文档或代码的形式呈现出来。好记性不如烂笔头,程序员应该乐于并擅于记录总结工作中遇到的各种问题、工作成果、奇思异想和感悟等。
程序员的世界是孤独的,但也是充满激情和阳光的。正是开源精神点亮了这一切。生命中最美丽的报偿之一便是帮助他人的同时,也帮助了自己 ─ 罗夫‧瓦尔多‧爱默生
因此,将个人的经验和感悟与他人分享,成就的不仅仅是个人,更可以帮助其他人少走弯路。那么就开始分享的旅程吧!
传统的笔记或者blog平台
在本地可以用各种文档格式保存自己的技术积累,也可以采用一些市面上的blog平台作为载体来存储自己的技术文章,但这类方式存在一些弊端,这点你可以打开你的脑洞,想想有哪些,本人不是来挑起舌战的。
Github pages+Hexo+Nodejs搭建个人blog
好处和缺点这里就暂不提了,请自行google。(本文仅仅是提供一种搭建Blog的方式,不牵涉任何利益方!!!)
步骤如下:
- 安装git:git下载,注意:Windows平台需要下载对应的安装exe,安装之后后续的命令行操作需要在GitShell中打开而非Windows默认的命令行。不过,建议直接下载Github windows客户端,安装的时候会创建GitShell(正是下文提及的GitShell)和GitHub GUI工具。
- 安装nodejs:node.js官网,注意:请根据自己主机的平台下载对应版本。
- 安装hexo及部署:hexo官网,注意:安装 Hexo 相当简单。然而在安装前,您必须确保先完成步骤1和2。Hexo网站可以选择语言为简体中文,方便使用。查看其中的文档可以看到hexo的详细使用说明,so easy!
重点阐述下步骤3的过程(hexo的详细信息可参加hexo说明文档):
安装hexo
在Gitshell(已经安装了git并且将git加入到path环境变量中)输入:
$ npm install -g hexo-cli
建站
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹(自行选定的文件夹folder)中新建所需要的文件。
$ hexo init folder
$ cd folder
$ npm install
新建完成后,指定文件夹的目录如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
1 | package.json |
scaffolds
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
source
资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题来生成静态页面。
本地启动server
该步骤可以检验安装是否ok。如果能成功,那么恭喜你离成功更近一步了。
在Gitshell中进入前面指定的folder(建立的站点的根目录),输入:
$ hexo server
可以观察命令行的输出,然后通过浏览器打开http://localhost:4000/,成功的情况下则会看到默认的欢迎页面。
部署到github pages
Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。
$ hexo deploy
在开始之前,您必须先在站点的配置文件_config.yml(前面建立的folder目录下)中修改参数,一个正确的部署配置中至少要有 type 参数,例如:
1 | deploy: |
您可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。
1 | deploy: |
这里重点提及部署到Github pages的方法(步骤)。
a.首先在Github上面创建一个新的Repository,仓库命名格式为yourname.github.io,注意:yourname是你自己定义的一个名称,后面的github.io是统一的,格式一定需要符合这个样式。
b.然后,配置文件_config.yml
1 | deploy: |
说明:
参数 | 描述 |
---|---|
repo | 库(Repository)地址 |
branch | 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。 |
message | 自定义提交信息 |
eg(我的Github账号是cstsinghua,而我新建的仓库名称是cstsinghua.github.io):1
2
3
4deploy:
type: git
repository: git@github.com:cstsinghua/cstsinghua.github.io.git
branch: master
注意:如果是建立项目网站,则branch需要修改为gh-pages,详细情况请参见Github pages中User, Organization, and Project Pages的差异
c.安装hexo的git插件hexo-deployer-git
$ npm install hexo-deployer-git –save
d.部署前面建立的站点(folder下面的内容):
执行完,开始部署,即先hexo generate,然后hexo deploy。也可以一步到位:hexo d -g
$ hexo clean
$ hexo generate
$ hexo deploy
或者:
$ hexo d -g
注意:在这一步可能报错,已知的一些错误可以参见hexo git部署常见问题
另外,可能遇到SSH publickey接入问题,可以参见创建github SSH key和github SSH key管理
(optional)重绑定域名
Custom domain redirects for GitHub Pages sites(将独立(个性)域名与GitHub Pages的空间域名绑定)
yourname.github.io的域名格式比较固定,那么是否可以设置一个个性化的域名呢,另外需要注意的是Github pages的容量受限于github的要求,目前是1GB(请参见https://help.github.com/articles/what-are-github-pages/)。因此,建立一个独立的个性化(blog)网站(域名是个性化独立的,容量也可以调整),在某些情况下还是有必要的(请参见github pages域名重定向)。
Github pages 设置:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,如cstsinghua.me。
DNS设置:注册DNSpod,添加域名,不是必要的步骤,但是据说可以提高解析效率。本人没有测试。
在域名服务商,如net.cn中修改增加两条A记录,指向github pages 提供的 ip
192.30.252.153
192.30.252.154
推广
一旦成功创建属于自己的blog,当然是想与他人分享,让小伙伴们都可以搜索到或者浏览自己的成果。很不幸的是,采用本文方式创建的blog默认情况下只会静静躺在互联网的一个角落,google或者百度等搜索引擎是无法知晓它的存在。因此,我们必须采用一些方式来推广自己的blog,让其他人能够通过Google或者百度等搜索引擎搜索到我们blog。
先验证博客是否被搜索引擎收录
在百度或者谷歌上面输入下面格式来判断,如果能搜索到就说明被收录,否则就没有,用你的域名替代我的cstsinghua.github.io
site:cstsinghua.github.io
如下图:
如果已被搜索引擎收录,那恭喜你,可以不用看后面的内容了。你的blog已经在互联网上飘香四溢。
在google和百度的站长管理平台验证并添加blog地址
这里以Google为例(百度的类似):
1.登录google站长管理平台,在首页中点击”添加属性”按钮,然后将你的blog地址填写并添加,如下图所示:
2.blog网址添加完成之后,会跳转到验证所有权页面,验证方式有很多种,可以根据自己的情况选择,这里选择推荐的方法,即上传HTML文件的方式,其步骤在跳转的页面写得很清楚,按部就班地操作就行了(注意:先点击下载页面提示的HTML文件,报错)。如下图所示:
3.生成并提交站点地图(sitemap.xml)
站点地图是一种文件,您可以通过该文件列出您网站上的网页,从而将您网站内容的组织架构告知Google和其他搜索引擎。Googlebot等搜索引擎网页抓取工具会读取此文件,以便更加智能地抓取您的网站。怎么生成blog网站的站点地图呢?方式有很多种,hexo本身也自带了生成站点地图的插件。我们要先安装插件,打开你的hexo博客根目录,分别用下面两个命令来安装针对谷歌和百度的插件:
npm install hexo-generator-sitemap –save
npm install hexo-generator-baidu-sitemap –save
在blog根目录的配置文件_config.yml中添加如下代码
1
2
3
4sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml然后,修改blog根目录的配置文件_config.yml中url参数为你blog的地址,比如我的是这样:
1
2
3# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://cstsinghua.github.io/此时,可以重新生成你的blog
hexo g
如果你在你的blog根目录的public下面发现生成了sitemap.xml以及baidusitemap.xml就表示成功了。当然可以采用其他很多方式来生成sitemap.xml,网上也有很多在线工具或者提供下载的本地GUI工具来生成,可以参见https://code.google.com/archive/p/sitemap-generators/wikis/SitemapGenerators.wiki,里面提供了非常多的链接地址,本人使用过https://xmlsitemapgenerator.org在线生成过。
最后,将生成的sitemap.xml提交到google站长管理平台,如下图所示:
蓝色表示sitem.xml里面上传的网页数,橙色表示已经被google加入索引(收录)的网页数,一旦被收录,这个时候就可以在google上面搜索到blog了!关于细节可以点击google站长页面上的帮助进行了解。